<template>
  <h1>管理员列表</h1>
  <hr />
  <el-table :data="AdminList" style="width: 100%" height="95%">
    <el-table-column fixed prop="adminid" label="管理员编号" width="200" />
    <el-table-column prop="adminname" label="管理员姓名" width="200" />
    <el-table-column prop="password" label="密码" width="200">
    </el-table-column>
    <el-table-column prop="role" label="角色" width="200">
      <template #default="scope">
        <span>{{ scope.row.role == 1 ? "超级管理员" : "普通管理员" }}</span>
      </template>
    </el-table-column>

    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button size="small" v-if="crud.charAt(0)==='1'" @click="editAdmin(scope.row.adminname,scope.row)"
          >Edit</el-button>
        <el-popconfirm
          title="确定删除?"
          @confirm="delAdmin(scope.row.adminid)"
        >
          <template #reference>
            <el-button size="small" type="danger" v-if="crud.charAt(3)==='1'"> Delete </el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 设置弹窗 -->
  <el-dialog
    v-model="dialogVisible"
    title="修改操作人员"
    width="35%"
    :before-close="handleClose"
  >
  <el-form
      :model="adminList"
      label-width="80px"
      class="adminList"
      status-icon
    >
      <el-form-item label="编号">
        <el-input v-model="adminList.adminid" disabled />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="adminList.adminname" disabled />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="adminList.password" />
      </el-form-item>

      <el-form-item label="角色">
        <el-radio-group v-model="adminList.role">
          <el-radio :label="1">超级管理员</el-radio>
          <el-radio :label="2">普通管理员</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="权限">
        <!-- 权限列表 -->
        <el-tree
          ref="treeRef"
          :data="data"
          show-checkbox
          background-color="#eef0f1"
          node-key="id"
          highlight-current
          :default-checked-keys="adminList.checkedKeys"
          check-strictly
          accordion
          isLeaf
        />
      </el-form-item>
    </el-form>
  <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelForm()">Cancel</el-button>
        <el-button type="primary" @click="editForm()">
          Edit
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref,watch } from "vue";
// 在菜单数据中拿数据
import { menuData as data } from "../../../permessions/menu";
import { ElMessage } from "element-plus";
import "element-plus/dist/index.css";
import {useRoute} from "vue-router";
// 导入封装好的请求
import { user_delete, admin_list, user_login,user_update,user_detail } from "../../../utils/api";
interface IAdmin {
  adminid: string;
  adminname: string;
  password: string;
  role: number; // 1:表示超级管理员，2：普通管理员
  checkedKeys: any;
}
const $route = useRoute();
const crud:string = ($route.meta.crud as string);
// 管理员数据
let AdminList = reactive<IAdmin[]>([]);

interface ILogin {
  adminname: string;
  password: string;
}

let AdminLogin = reactive<ILogin[]>([]);
// 设置状态用来控制弹窗的显示或隐藏
const dialogVisible=ref(false)
// 弹窗退出的事件
const handleClose = () => {
  dialogVisible.value=false
}
// 获取管理员列表
const getAdminList = () => {
  admin_list().then((res: any) => {
    if (res.data.code === "200") {
      AdminList.length = 0;
      AdminList.push(...res.data.data);
    }
  });
};
// 进入页面直接渲染
getAdminList();
// 删除管理员
const delAdmin = (adminid: string) => {
  user_delete(adminid).then((res) => {
    if (res.data.code === "200") {
      ElMessage({
        message: "删除成功！",
        type: "success",
      });
      // 利用删除前端数组删除(如果多人同时操作数据，那么，就看不到别人删除的数据)
      let index = AdminList.findIndex((item) => item.adminid === adminid);
      AdminList.splice(index, 1);
    }
  });
};
// 获取要修改的管理员姓名
const editAdminName = ref("");
// 修改管理员信息
const editAdmin = (adminname: string,row:any) => {
// 通过改变状态来控制弹窗隐藏
dialogVisible.value=true
  // 获取监听到的管理员姓名
  editAdminName.value = adminname;
// 获取需要修改的用户信息
  user_detail({adminname:adminname}).then((res) => {
    if (res.data.code === "200") {
      adminList.adminid = res.data.data[0].adminid;
      adminList.adminname = res.data.data[0].adminname;
      adminList.role = res.data.data[0].role;
      adminList.checkedKeys = res.data.data[0].checkedKeys;
    }
  });
};
const adminList = reactive({
  adminid: "",
  adminname: "",
  password: "",
  role: "",
  checkedKeys: "",
});

// Edit-修改
const editForm = () => {
  user_update(adminList).then((res) => {
    if (res.data.code === "200") {
      ElMessage({
        message: "管理员信息修改成功！",
        type: "success",
      });
      // 修改成功后，重新发送请求，用来获取最新的数据，也就是修改后的数据，来渲染页面
      getAdminList()
      dialogVisible.value=false
    }
  });
};
// Cancel-关闭弹框
const cancelForm = () => {
  dialogVisible.value = false
};
</script>

<style scoped>

</style>